<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-date-picker
            v-model="searchTerms.date"
            class="picker"
            type="daterange"
            value-format="timestamp"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getData"/>
          <el-input v-model="searchTerms.searchText" placeholder="请输入up主名称或标题" class="search-input" @change="getData"/>
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" class="bg-green" @click="$router.push('./videoUpload')">上传视频</el-button>
        </div>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row
                @sort-change="handleSortChange">
        <el-table-column label="缩略图" width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.coverImgId" fit="cover" style="width: 128px;height: 72px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="broadcasterName" label="UP主" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="title" label="视频标题" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="viewCount" label="播放量" min-width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="likeCount" label="点赞数" min-width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="commentCount" label="评论数" min-width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="createTime" label="上传时间" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime?parseTime(scope.row.createTime, '{y}-{m}-{d}'):'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" min-width="110" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <label v-if="scope.row.handleResult==1">处理中</label>
            <el-tooltip v-else-if="scope.row.handleResult===3" :content="scope.row.reviewContent||'-'" effect="dark" placement="top">
              <el-link>发布失败</el-link>
            </el-tooltip>
            <label v-else>发布成功</label>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="110" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="toChangeStatus(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green"
                        @click="toShowModifyDialog(scope.row)"/>-->
            <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green"
                       @click="$router.push(`./videoUpload?id=${scope.row.id}`)"/>
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>

    <!--添加tabbar-->
    <el-dialog :visible.sync="modifyDialogVisible" :modal="false" title="编辑信息"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="tabbarDialog" center>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="图标" prop="iconPath">
          <div class="remark">*注:为保证显示效果,请上传16:9的图片</div>
          <ws-upload-single-img v-model="form['coverImgId']"
                                :path="form['coverImgUrl']"
                                width="160" height="90"/>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form['title']"/>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form['desc']" type="textarea" rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '../../../../utils/table'

  export default {
    data() {
      return {
        searchTerms: {
          date: '',
          searchText: ''
        },
        modifyDialogVisible: false,
        form: {
          title: '',
          desc: ''
        },
        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 320,
        multipleSelection: [],
        tableLoading: false,
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0,
        tableData: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = '../videoAdmin/vodMedia/getList'
        const data = {
          page: this.currentPage,
          pageSize: this.pageSize,
          searchText: this.searchTerms.searchText
        }
        this.searchTerms.date && this.searchTerms.date.length !== 0 && (data.startTime = this.searchTerms.date[0], data.endTime = this.searchDate[1]);
        order.sortName && (data.sortName = order.sortName)
        order.sortOrder && (data.sortOrder = order.sortOrder)
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data.list
          this.total = res.data.count
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      toShowModifyDialog({id, coverImgId, coverImgUrl, title, desc}) {
        this.modifyDialogVisible = true;
        this.form = {
          id: id,
          title: title,
          desc: desc,
          coverImgId: coverImgId,
          coverImgUrl: coverImgUrl
        }
      },
      submitForm() {
        const url = '../videoAdmin/vodMedia/updateMediaInfo';
        const data = this.form;
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.getData();
        }).catch((err) => {
          this.$message.error(err.msg);
        })
      },
      toChangeStatus({id, status}) {
        const url = '../videoAdmin/vodMedia/updateStatus';
        const data = {
          id: id,
          status: status ? 1 : 0
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.getData();
        }).catch((err) => {
          this.$message.error(err.msg);
        })
      },
      toDelete(row) {
        this.$confirm('此操作将删除该视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = '../videoAdmin/vodMedia/deleteMedia'
          const data = {
            id: row.id
          }
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.getData()
          }).catch(e => {
            this.$message.error('删除失败,请刷新或联系管理员!')
          })
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding: 10px 0;

      div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
      }

      .el-select {
        padding-right: 15px;
        width: 180px;
      }

      .search-input {
        padding-left: 15px;
        width: 240px;
      }

      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
    }
  }

  .dialog {
    .content {
      text-align: center
    }
  }

  .el-tag {
    cursor: pointer;
  }
</style>
